<div class="ibt-fixed-table-container" #container>
  <div class="table-scroll-content" #scrollTableContainer>
    <table class="table table-bordered table-hover table-striped table-keep-line" [hidden]="fold">
      <thead #scrollTableHeader>
      <tr role="row" [hidden]="fold">
        <th rowspan="2" [hidden]="isHiddenColumn('select')">
          <div class="cell">
            <input type="checkbox">
          </div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('index')">
          <div class="cell">序号
          </div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('file')">
          <div class="cell">成交单
          </div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('fundName')">
          <div class="cell">资产组合</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('fundCode')">
          <div class="cell">组合代码</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('tradingFloorShow')">
          <div class="cell">场所</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('tradeTypeShow')">
          <div class="cell">业务类型</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('oppoHolderShortName')">
          <div class="cell">交易对手</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('productCode')">
          <div class="cell">证券代码</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('productName')">
          <div class="cell">证券简称</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('tradeDate')">
          <div class="cell">交易日期</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('settlementDate')">
          <div class="cell">结算日期</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('settlementAmount')">
          <div class="cell">清算金额</div>
        </th>
        <th rowspan="1" colspan="2" [hidden]="isHiddenColumn('confirmStatus')">
          <div class="cell">指令状态</div>
        </th>
        <th rowspan="1" colspan="2" [hidden]="isHiddenColumn('contractStatus')">
          <div class="cell">合同状态</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('srcTradeId')">
          <div class="cell">源成交编号</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('tradeId')">
          <div class="cell">交易编号</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('transferInstructionStatusShow')">
          <div class="cell">划款指令状态</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('trdFundName')">
          <div class="cell">O32指令基金名称</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('trdTradeTypeShow')">
          <div class="cell">O32指令委托方向</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('trdProductCode')">
          <div class="cell">O32指令证券代码</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('trdProductName')">
          <div class="cell">O32指令证券名称</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('trdSettleBalance')">
          <div class="cell">O32指令金额</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('trdPledgeMatchStatus')">
          <div class="cell">O32质押券比对</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('trdMatchStatus')">
          <div class="cell">
            O32匹配状态
            <a href="javascript:void(0)"
               class="fa text-blue"
               [class.fa-angle-double-left]="o32Fold === false"
               [class.fa-angle-double-right]="o32Fold === true"
               (click)="toggleO32Fold()"
            ></a>
          </div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('urgentStatus')">
          <div class="cell">是否加急</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('nettingStatus')">
          <div class="cell">轧差状态</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('trdSettleCompareStatus')">
          <div class="cell">交收比对</div>
        </th>
      </tr>
      <tr>
        <th rowspan="1" [hidden]="isHiddenColumn('ownConfirmStatusShow')">本方</th>
        <th rowspan="1" [hidden]="isHiddenColumn('oppoConfirmStatusShow')">对方</th>
        <th rowspan="1" [hidden]="isHiddenColumn('ownContractStatusShow')">本方</th>
        <th rowspan="1" [hidden]="isHiddenColumn('oppoContractStatusShow')">对方</th>
      </tr>
      </thead>
      <tbody #scrollTableBody>
      <tr *ngFor="let item of data.list;let index = index;" [attr.data-index]="index"
          [class.text-gray]="config.color !== false && item.cancelByHand === 'Y'"
          [attr.alt]="item.cancelByHand === 'Y' ? '已作废':''"
          [attr.title]="item.cancelByHand === 'Y' ? '已作废':''"
      >
        <td data-field="" [hidden]="isHiddenColumn('select')">
          <div class="cell">
            <input type="checkbox" [attr.data-index]="index">
          </div>
        </td>
        <td data-field="" [hidden]="isHiddenColumn('index')">
          <div class="cell">{{index + indexOffest +1}}</div>
        </td>
        <td data-field="" [hidden]="isHiddenColumn('file')">
          <div class="cell">
            <ng-container *ngIf="item.tradeOrderFileId;else uploadFileIcon$1">
              <a class="text-green" download [attr.href]="createFileDownloadLink(item.orderSerialNo)">{{'查看成交单'}}</a>
              <span *ngIf="config.unableRemoveFile !== true" class="fa fa-remove ibt-operation-icon text-red" alt="删除附件"
                    title="删除附件"
                    (click)="removeFileAction(item.orderSerialNo)"></span>
            </ng-container>
            <ng-template #uploadFileIcon$1>
              <a *ngIf="item.cancelByHand !== 'Y' && config.unableUpload !== true" href="javascript:void(0)" alt="上传附件" title="上传附件"
                 (click)="uploadFileAction(item.orderSerialNo)">
                {{'尚未上传成交单'}}
              </a>
              <a *ngIf="config.unableUpload === true || item.cancelByHand === 'Y'" class="text-gray ibt-cursor-not-allowed" href="javascript:void(0)">尚未上传成交单</a>
            </ng-template>
          </div>
        </td>
        <td data-field="fundName" [hidden]="isHiddenColumn('fundName')">
          <!-- 资产组合 -->
          <div class="cell">{{item.fundName}}</div>
        </td>
        <td data-field="fundCode" [hidden]="isHiddenColumn('fundCode')">
          <!-- 组合代码 -->
          <div class="cell">{{item.fundCode}}</div>
        </td>
        <td data-field="tradingFloorShow" [hidden]="isHiddenColumn('tradingFloorShow')">
          <!--场所-->
          <div class="cell">{{item.tradingFloorShow}}</div>
        </td>
        <td data-field="tradeTypeShow" [hidden]="isHiddenColumn('tradeTypeShow')">
          <!--业务类型-->
          <div class="cell">{{item.tradeTypeShow}}</div>
        </td>
        <td data-field="oppoHolderShortName" [hidden]="isHiddenColumn('oppoHolderShortName')">
          <!--交易对手-->
          <div class="cell">{{item.oppoHolderShortName}}</div>
        </td>
        <td data-field="productCode" [hidden]="isHiddenColumn('productCode')">
          <!--证券代码-->
          <div class="cell">{{item.productCode}}</div>
        </td>
        <td data-field="productName" [hidden]="isHiddenColumn('productName')">
          <!--证券简称-->
          <div class="cell">{{item.productName}}</div>
        </td>
        <td data-field="tradeDate" [hidden]="isHiddenColumn('tradeDate')">
          <!--交易日期-->
          <div class="cell">{{item.tradeDate | moment}}</div>
        </td>
        <td data-field="settlementDate" [hidden]="isHiddenColumn('settlementDate')">
          <!--结算日期-->
          <div class="cell">{{item.settlementDate | moment}}</div>
        </td>
        <td data-field="settlementAmount" [hidden]="isHiddenColumn('settlementAmount')">
          <!-- 清算金额 -->
          <div class="cell">{{item.settlementAmount}}</div>
        </td>
        <td data-field="ownConfirmStatusShow" [hidden]="isHiddenColumn('ownConfirmStatusShow')">
          <!--- 本方指令状态 -->
          <div class="cell">{{item.ownConfirmStatusShow}}</div>
        </td>
        <td data-field="oppoConfirmStatusShow" [hidden]="isHiddenColumn('oppoConfirmStatusShow')">
          <!--- 对方指令状态 -->
          <div class="cell">{{item.oppoConfirmStatusShow}}</div>
        </td>
        <td data-field="ownContractStatusShow" [hidden]="isHiddenColumn('ownContractStatusShow')">
          <!--本方合同状态-->
          <div class="cell">{{item.ownContractStatusShow}}</div>
        </td>
        <td data-field="oppoContractStatusShow" [hidden]="isHiddenColumn('oppoContractStatusShow')">
          <!--对方合同状态-->
          <div class="cell">{{item.oppoContractStatusShow}}</div>
        </td>
        <td data-field="srcTradeId" [hidden]="isHiddenColumn('srcTradeId')">
          <!-- 源成交编号 -->
          <div class="cell">{{item.srcTradeId}}</div>
        </td>
        <td data-field="tradeId" [hidden]="isHiddenColumn('tradeId')">
          <!-- 成交编号／交易编号 -->
          <div class="cell">{{item.tradeId}}</div>
        </td>
        <td data-field="transferInstructionStatusShow" [hidden]="isHiddenColumn('transferInstructionStatusShow')">
          <!--划款指令状态-->
          <div class="cell">{{item.transferInstructionStatusShow}}</div>
        </td>
        <td data-field="trdFundName" [hidden]="isHiddenColumn('trdFundName')">
          <!-- O32指令基金名称/恒生指令基金名称 -->
          <div class="cell">{{item.trdFundName}}</div>
        </td>
        <td data-field="trdTradeTypeShow"
            [hidden]="isHiddenColumn('trdTradeTypeShow')">
          <!--O32指令委托方向 -->
          <div class="cell">{{item.trdTradeTypeShow}}</div>
        </td>
        <td data-field="trdProductCode" [hidden]="isHiddenColumn('trdProductCode')">
          <!--O32指令证券代码/恒生指令证券代码  -->
          <div class="cell">{{item.trdProductCode}}</div>
        </td>
        <td data-field="trdProductName" [hidden]="isHiddenColumn('trdProductName')">
          <!--O32指令证券名称/恒生指令证券名称  -->
          <div class="cell">{{item.trdProductName}}</div>
        </td>
        <td data-field="trdSettleBalance" [hidden]="isHiddenColumn('trdSettleBalance')">
          <!--O32指令金额/恒生指令金额  -->
          <div class="cell">{{item.trdSettleBalance | numeral:'0,0.00':false}}</div>
        </td>
        <td data-field="trdPledgeMatchStatus" [hidden]="isHiddenColumn('trdPledgeMatchStatus')">
          <!-- O32质押券比对/恒生质押券比对状态 -->
          <div class="cell">
            <a href="javascript:void(0)"
               [class.text-green]="item.trdPledgeMatchStatus === 'Y'"
               [class.text-red]="item.trdPledgeMatchStatus === 'N'"
               (click)="getPledgeAllDataAction(item.orderSerialNo)">
              {{item.trdPledgeMatchStatusShow}}
            </a>
          </div>
        </td>
        <td data-field="trdMatchStatus" [hidden]="isHiddenColumn('trdMatchStatus')">
          <!-- O32匹配状态/恒生比对状态 -->
          <div class="cell">
            {{item.trdMatchStatusShow}}
          </div>
        </td>
        <td data-field="urgentStatus" [hidden]="isHiddenColumn('urgentStatus')">
          <!-- 是否加急/加急状态 -->
          <div class="cell">
            <ng-template #hasUrgented>
              <button type="button" class="text-gray btn btn-link disabled">已发起</button>
            </ng-template>
            <button type="button" *ngIf="item.urgentStatus !== 'Y'; else hasUrgented"
                    class="btn btn-link"
                    [class.disabled]="item.cancelByHand === 'Y'"
                    [class.text-gray]="config.color !== false && item.cancelByHand === 'Y'"
                    (click)="item.cancelByHand !== 'Y' ? urgentAction(item.settlementOrderId) : ''">
              发起
            </button>
          </div>
        </td>
        <td data-field="nettingStatus" [hidden]="isHiddenColumn('nettingStatus')">
          <!-- 轧差状态 -->
          <div class="cell">
            {{(item.nettingStatus === 'Y') ? '已轧差' : '未轧差'}}
          </div>
        </td>
        <td data-field="trdSettleCompareStatus" [hidden]="isHiddenColumn('trdSettleCompareStatus')">
          <!--交收比对/交收比对状态  -->
          <div class="cell">
            {{item.trdSettleMatchStatusShow}}
          </div>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
  <div class="ibt-table-fixed-content" #fixedTableContainer>
    <table class="table table-bordered table-hover table-striped table-keep-line" [hidden]="fold" #fixedTable>
      <thead #fixedTableHeader>
      <tr role="row" [hidden]="fold">
        <th rowspan="2" [hidden]="isHiddenColumn('select')">
          <div class="cell">
            <input type="checkbox" data-field="selectAll" #selectAll (click)="toggleSelectAll()">
          </div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('index')">
          <div class="cell">序号
          </div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('file')">
          <div class="cell">成交单
          </div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('fundName')">
          <div class="cell">资产组合</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('fundCode')">
          <div class="cell">组合代码</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('tradingFloorShow')">
          <div class="cell">场所</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('tradeTypeShow')">
          <div class="cell">业务类型</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('oppoHolderShortName')">
          <div class="cell">交易对手</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('productCode')">
          <div class="cell">证券代码</div>
        </th>
        <th rowspan="2" [hidden]="isHiddenColumn('productName')">
          <div class="cell">证券简称</div>
        </th>
      </tr>
      </thead>
      <tbody #fixedTableBody>
      <tr *ngFor="let item of data.list;let index = index;" [attr.data-index]="index"
          [class.text-gray]="config.color !== false && item.cancelByHand === 'Y'"
          [attr.alt]="item.cancelByHand === 'Y' ? '已作废':''"
          [attr.title]="item.cancelByHand === 'Y' ? '已作废':''"
      >
        <td data-field="" [hidden]="isHiddenColumn('select')">
          <div class="cell">
            <input type="checkbox" [attr.data-index]="index" data-field="select" #select
                   (click)="selectOne($event,index)">
          </div>
        </td>
        <td data-field="" [hidden]="isHiddenColumn('index')">
          <div class="cell">{{index + indexOffest + 1}}</div>
        </td>
        <td [hidden]="isHiddenColumn('file')">
          <div class="cell">
            <ng-container *ngIf="item.tradeOrderFileId;else uploadFileIcon$2">
              <a class="text-green" download [attr.href]="createFileDownloadLink(item.orderSerialNo)">{{'查看成交单'}}</a>
              <span *ngIf="config.unableRemoveFile !== true" class="fa fa-remove ibt-operation-icon text-red" alt="删除附件"
                    title="删除附件"
                    (click)="removeFileAction(item.orderSerialNo)"></span>
            </ng-container>
            <ng-template #uploadFileIcon$2>
              <a *ngIf="item.cancelByHand !== 'Y' && config.unableUpload !== true" href="javascript:void(0)" alt="上传附件" title="上传附件"
                 (click)="uploadFileAction(item.orderSerialNo)">{{'尚未上传成交单'}}</a>
              <a *ngIf="config.unableUpload === true || item.cancelByHand === 'Y'" class="text-gray ibt-cursor-not-allowed" href="javascript:void(0)">尚未上传成交单</a>
            </ng-template>
          </div>
        </td>
        <td data-field="fundName" [hidden]="isHiddenColumn('fundName')">
          <!-- 资产组合 -->
          <div class="cell">{{item.fundName}}</div>
        </td>
        <td data-field="fundCode" [hidden]="isHiddenColumn('fundCode')">
          <!-- 组合代码 -->
          <div class="cell">{{item.fundCode}}</div>
        </td>
        <td data-field="tradingFloorShow" [hidden]="isHiddenColumn('tradingFloorShow')">
          <!--场所-->
          <div class="cell">{{item.tradingFloorShow}}</div>
        </td>
        <td data-field="tradeTypeShow" [hidden]="isHiddenColumn('tradeTypeShow')">
          <!--业务类型-->
          <div class="cell">{{item.tradeTypeShow}}</div>
        </td>
        <td data-field="oppoHolderShortName" [hidden]="isHiddenColumn('oppoHolderShortName')">
          <!--交易对手-->
          <div class="cell">{{item.oppoHolderShortName}}</div>
        </td>
        <td data-field="productCode" [hidden]="isHiddenColumn('productCode')">
          <!--证券代码-->
          <div class="cell">{{item.productCode}}</div>
        </td>
        <td data-field="productName" [hidden]="isHiddenColumn('productName')">
          <!--证券简称-->
          <div class="cell">{{item.productName}}</div>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
